<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // var obj = Object.create(null, {
    //   name: {
    //     value: "司空震",
    //     configurable : true, //布尔值为true时 可以改变属性的值
    //     enumerable: true  //布尔值为true时 可以循环对象
    //     // 两者默认值都为false
    //   },
    //   age: {
    //     value: 60,
    //     configurable : true,
    //     enumerable: true
    //   },
    // });
    // // delete obj.age
    // console.log(obj);
    // for (var k in obj) {
    //       console.log(k);
    // }

    // 通过存储器来创建对象
    // var obj = Object.create(null, {
    //   name: {
    //     configurable: true, //布尔值为true时 可以改变属性的值
    //     enumerable: true, //布尔值为true时 可以循环对象
    //     // 两者默认值都为false
    //     get: function () {
    //       console.log(
    //         "读取对象属性的时候执行这个get函数，返还值就是对象的键值"
    //       );
    //       return "白加黑";
    //     },
    //     set: function (newvalue) {
    //       console.log("只要设置了内容 都会经过 set函数", newvalue);
    //     },
    //   },
    //   age: {
    //     configurable: true,
    //     enumerable: true,
    //     get: function () {
    //       console.log("get age");
    //       return 60;
    //     },
    //     set: function (newvalue) {
    //       console.log("只要设置age属性都会经过我,set函数,设置的值是", newvalue);
    //     },
    //   },
    // });
    // // console.log(obj);
    // obj.name;
    // obj.age;

    // 二、创建或者修改一个对象；
    //  Object.defineProperty ： 是 vue2.0 的响应式原理的核心函数。
    //                             vue3.0 通过 ES6里的 Proxy的内置构造函数实现响应式
    //  Object.defineProperty

    // 1.创建一个对象
    // var  obj = Object.defineProperty({},"name",{
    //     configurable:true,
    //     enumerable:true,
    //     get:function(){
    //         console.log("get执行了");
    //         return "张三";
    //     },
    //     set:function(newvalue){
    //         console.log("新值",newvalue);
    //     }
    // })

    // console.log(obj);

    // 2.把一个普通对象 修改成一个可控制(可观察的)对象

    var obj = {
      name: "张安",
      age: 20,
    };
    // console.log(obj);

    function observer(obj) {
      for (var key in obj) {
        // (function (key) {
        let value = obj[key];
        Object.defineProperty(obj, key, {
          configurable: true,
          enumerable: true,
          get: function () {
            console.log("get");
            return value;
          },
          set: function (newvalue) {
            console.log("set");
            // value = newvalue;
          },
        });
        // })(key)
      }
    }
    // console.log(obj);  // 普通对象
    observer(obj); // 修改obj为一个可观察的对象；
    console.log(obj); // 可观察的对象

    // Object.defineProperty(obj,"name",{
    //     configurable:true,
    //     enumerable:true,
    //     get:function(){
    //         console.log("get")
    //         return "李四"
    //     },
    //     set:function(newvalue){
    //         console.log("新值",newvalue);
    //     }
    // })
  </script>
</html>
